<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{person.name}}今年{{person.age}}岁</p>
      <button @click="person.age++">年龄增加</button>
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            person: { name: 'lili', age: 14 },
          };
        },
        watch: {
          // 如果监听的是一个对象，并想侦听到对象内部属性的变化，那么watch的配置中也要写一个对象

          // 方式一：监听对象，通过对象再去监听属性
          /* 格式   要监听的对象名：{
              deep: true, 
              immediate: true//可选配置，立即监听
              handler(newVal, oldVal){
                代码块
              }
          }*/
          // person: {
          //   deep: true, //开启深度监听
          //   // immediate: true, //立即监听，防止页面初次渲染时没有数据显示
          //   handler(newVal, oldVal) {
          //     // newVal, oldVal是person对象
          //     console.log(newVal, oldVal);

          //     console.log(`监听到改变，从${oldVal.age}岁变成${newVal.age}岁`);
          //     newVal===oldVal;//true，因为数据是引用数据类型
          //   },
          // },

          // 方式二：直接监听对象的属性
          /* 格式
          '对象中的属性名'(newVal){
            代码块
          }
          */
          'person.age'(newVal) {
            console.log(`监听到变化，年龄变成${newVal}`);
          },
        },
      });
    </script>
  </body>
</html>
